<script setup>
import {ref} from "vue"
import {useRouter} from "vue-router";
const router = useRouter()
const list = ref([
  {
    model: ref([]),
    name: 'photo',
    label: '商品图片',
    pla: '请上传图片',
    isUploader: true,
  },
  {
    model: ref(''),
    name: 'name',
    label: '商品名称',
    pla: '请输入商品名称'
  },
  {
    model: ref(''),
    name: 'type',
    label: '商品类型',
    pla: '请选择商品类型'
  },
  {
    model: ref(''),
    name: 'sale',
    label: '销售价格',
    pla: '请输入销售价格'
  },
  {
    model: ref(''),
    name: 'stock',
    label: '进货价格',
    pla: '请输入进货价格'
  },
  {
    model: ref(''),
    name: 'code',
    label: '货号',
    pla: '请输入货号'
  },
  {
    model: ref(''),
    name: 'bar',
    label: '条形码',
    pla: '请输入或扫描条形码'
  },
  {
    model: ref(''),
    name: 'spec',
    label: '规格',
    pla: '请输入规格'
  },
  {
    model: ref(''),
    name: 'unit',
    label: '单位',
    pla: '请输入单位'
  },
  {
    model: ref(''),
    name: 'inventory',
    label: '初始库存',
    pla: '请设置库存'
  },
  {
    model: ref(''),
    name: 'remark',
    label: '备注信息',
    pla: '请输入备注信息'
  }
])
const result = ref('');
const pickerValue = ref([]);
const showPicker = ref(false);
const columns = [
  { text: '原材料', value: '0' },
  { text: '半成品', value: '1' },
];
const onConfirm = ({ selectedValues, selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  pickerValue.value = selectedValues;
  list.value = list.value.map(item => {
    if (item.name === 'type') {
      item.model = result.value;
      console.log(item.model, '---')
    }
    return item;
  });
  // list.value = [...list.value];
  // console.log(list.value);
  showPicker.value = false;
};
const stockFn = () => {
  router.push('/Inventory')
}
const handleFieldClick = (item) => {
  if (item.name === 'type') {
    showPicker.value = true;
  } else if (item.name === 'inventory') {
    stockFn();
  }
};

</script>

<template>
  <div class="w-full roundCorner backgroundColor py-[10px]">
    <van-form>
      <van-form>
        <van-cell-group inset>
          <van-field
              v-for="(item, index) in list"
              :required="item.name==='name'"
              :key="index"
              :name="item.name"
              :label="item.label"
              :placeholder="item.pla"
              :v-model="item.isUploader ? item.model : ''"
              :is-link="item.name === 'type' || item.name === 'inventory'"
              :right-icon="item.name==='bar'? 'scan': ''"
              @click="handleFieldClick(item)"
          >
          <template #input v-if="item.isUploader">
            <van-uploader v-model="item.model" />
          </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </van-form>
  </div>
  <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
    <van-picker
        :columns="columns"
        :model-value="pickerValue"
        @confirm="onConfirm"
        @cancel="showPicker = false"
    />
  </van-popup>
</template>

<style scoped lang="less">
::v-deep{
  .van-cell{
  }
}
</style>